<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>系统登录</title>
    <link rel="stylesheet" type="text/css" th:href="@{/static/css/elemui-2.15.9.css}"/>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 flex justify-center items-center min-h-screen">
<div class="w-full max-w-sm bg-white p-8 rounded-lg shadow-lg">
    <h1 class="text-2xl font-semibold text-center mb-6">登录页面</h1>
    <form id="form-login" method="post">
        <p class="error text-red-500 text-center mb-4"></p>
        <div class="mb-4">
            <label class="block text-sm font-medium text-gray-700 mb-2">用户名</label>
            <input type="text" name="username" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" autocomplete="off"/>
        </div>
        <div class="mb-6">
            <label class="block text-sm font-medium text-gray-700 mb-2">密码</label>
            <input type="password" name="password" class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500" autocomplete="off"/>
        </div>
        <div class="mb-4 text-center">
            <button type="button" id="btn-login" class="w-full bg-blue-500 text-white px-4 py-2 rounded-lg focus:outline-none hover:bg-blue-600">
                登录
            </button>
        </div>
    </form>
    <p class="text-center text-sm text-gray-500 mt-4">© 2024 LiXiaoJun</p>
</div>

<script type="text/javascript" th:src="@{/static/util/javascript/jquery-3.5.1.min.js}"></script>
<script th:inline="javascript">
    const ctx = [[${#ctx.getExchange().getRequest().getContextPath()}]];
    $('#btn-login').bind('click',function () {
        $.ajax({
            url: '/userLogin',
            type: 'post',
            data: $('#form-login').serialize(),
            success: function (obj) {
                debugger
                if (obj.code === 200) {
                    window.location.href = ctx + '/index';
                } else {
                    $('.error').text(obj.msg);
                }
            },
            dataType:'json'
        });
    })
</script>
</body>
</html>